<template>
    <div class="template-index-Lu">
        <div style="margin:0 auto;display: flex;flex-wrap:wrap;padding:10px 30px;">
            <span>内控管理</span>
            <div @click="addFormClick(item.addStr)" v-for="(item,index) in moduleItem1" style="padding:30px;text-align:center">
                <div  class="menuDiv" :style="{height:(windowInnerHeight / 5)+'px',width:(windowInnerHeight / 5)+'px',}">
                    <i
                        v-if="iconType(item.icon)"
                        class="menuDiv-icon iconfont"
                        :class="item.icon"
                        >
                    </i>
                    <ych-icon
                        v-else
                        class="menuDiv-icon"
                        :type="item.icon"
                        >
                    </ych-icon>
                    <span style="padding-top:8px">{{ item.name }}</span>
                </div>
            </div>
            <!-- <div @click="HandleModal1" style="padding:30px;text-align:center">
              <div  class="menuDiv" :style="{height:(windowInnerHeight / 5)+'px',width:(windowInnerHeight / 5)+'px',}">
                <span>新报销单</span>
              </div>
            </div>
            <div @click="HandleModal2" style="padding:30px;text-align:center">
              <div  class="menuDiv" :style="{height:(windowInnerHeight / 5)+'px',width:(windowInnerHeight / 5)+'px',}">
                <span>申请转账单</span>
              </div>
            </div>
            <div @click="HandleModal3" style="padding:30px;text-align:center">
              <div  class="menuDiv" :style="{height:(windowInnerHeight / 5)+'px',width:(windowInnerHeight / 5)+'px',}">
                <span>支出报批单</span>
              </div>
            </div> -->
            <!-- <Video :src="src" :autoplay="true" :muted="true" :controls="true" :currentTime="0" :second="3" :width="650" style=""/> -->
        </div>
        <handleModal ref="handleModalRef"></handleModal>
        <HandleModal1 ref="HandleModal1Ref"></HandleModal1>
        <HandleModal2 ref="HandleModal2Ref"></HandleModal2>
        <HandleModal3 ref="HandleModal3Ref"></HandleModal3>
    </div>
</template>
<script src="../../../assets/aip-player_1.0.3/AipPlayer.min"></script>
<script>
import Video from '@/components/video/index.vue'
import handleModal from '../modal/handleModal.vue'
import HandleModal1 from '../newApplyFor/travelReimbursement/travelReimbursementForm.vue';
import HandleModal2 from '../newApplyFor/applicationForTransfer/applicationForTransferForm.vue';
import HandleModal3 from '../newApplyFor/expenseApproval/expenseApprovalForm.vue';
export default {
    components:{
        handleModal,HandleModal1,HandleModal2,HandleModal3
    },
    props:{
    },
    data(){
        return{
          src: 'http://vjs.zencdn.net/v/oceans.mp4',
            moduleItem1: [
                {
                    'name':'费用报销申请',
                    'icon':'clock-circle',
                    'addStr':'新增报销',
                },
                // {
                //     'name':'合同支付申请',
                //     'icon':'logout',
                //     'addStr':'合同',
                // },
                {
                    'name':'预算调配申请',
                    'icon':'credit-card',
                    'addStr':'财务预算',
                },
            ],
            menuColorList: [
                'background-image: linear-gradient(135deg, rgba(28, 157, 208, 0.8), rgba(28, 157, 208, 0.5));',
                'background-image: linear-gradient(135deg, rgba(115, 197, 150, 0.8), rgba(115, 197, 150, 0.5));',
                'background-image: linear-gradient(135deg, rgba(67, 140, 215, 0.8), rgba(67, 140, 215, 0.5));',
                'background-image: linear-gradient(135deg, rgba(117, 113, 220, 0.8), rgba(117, 113, 220, 0.5));',
            ],
            windowInnerHeight:window.innerHeight - 80 - 120,
            windowInnerWidth:window.innerWidth,
        }
    },
    watch:{

    },
    mounted(){
    },
    methods:{
        addFormClick(type){
            this.$nextTick(_ => {
                this.$refs.handleModalRef.addClick(type)
            })
        },
        iconType(name){
            if(name.substr(0,4) == 'spcy'){
                return true
            } else {
                return false
            }
        },
        HandleModal1(){
          this.$refs.HandleModal1Ref.visible = true
        },
        HandleModal2(){
          this.$refs.HandleModal2Ref.visible = true
        },
        HandleModal3(){
          this.$refs.HandleModal3Ref.visible = true
        }
    },
}
</script>
<style>
/* @import url('../css/oaLess.css');
@import url('../css/oaClass.css'); */
@import url('../css/internal-control.css');
</style>
<style lang="less" scoped>
.menuDiv {
    position: relative;
    display: inline-block;
    text-align: center;
    background: #fff;
    font-size: 16px;
    border-radius: 30px;
    box-shadow: 10px 10px 20px rgba(136,136,136,1);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    //
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .menuDiv-icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            color: #fff;
            line-height: 55px;
            font-size: 26px;
            margin-bottom: 5px;
        }
        .badge {
            position: absolute;
            top: -5px;
            right: -5px;
            width: 25px;
            height: 25px;
            background-color: red;
            color: white;
            border-radius: 50%;
            text-align: center;
            line-height: 25px;
            font-size: 16px;
            -webkit-transition: all 0.5s ease;
            -moz-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
        }
}
.menuDiv:hover {
        font-size: 18px;
        margin-top: -25px;
        .menuDiv-icon {
            font-size: 28px;
        }
        .badge {
            top: 0;
            right: 0;
        }
    }
.aaaaaaa:nth-child(4n+1) .menuDiv > .menuDiv-icon {
    background-image: linear-gradient(135deg, rgba(28, 157, 208, 0.8);
    rgba(28, 157, 208, 0.5))
}
.aaaaaaa:nth-child(4n+2) .menuDiv > .menuDiv-icon {
    background-image: linear-gradient(135deg, rgba(115, 197, 150, 0.8);
        rgba(115, 197, 150, 0.5))
}
.aaaaaaa:nth-child(4n+3) .menuDiv > .menuDiv-icon {
    background-image: linear-gradient(135deg, rgba(67, 140, 215, 0.8);
        rgba(67, 140, 215, 0.5))
}
.aaaaaaa:nth-child(4n+4) .menuDiv > .menuDiv-icon {
    background-image: linear-gradient(135deg, rgba(117, 113, 220, 0.8);
    rgba(117, 113, 220, 0.5))
}
</style>
